<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>地图</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .div_head {
            height: 50px;
            margin-left: 15px;
            margin-right: 15px;
            margin-top: 10px;
            background-color: #fff;
            border-radius: 5px;
            display: -webkit-box;
        }

        .head_left {
            width: 18px;
            height: 100%;
            background-image: url('../image/position1.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 18px 25px;
            margin-left: 15px;
        }

        .head_position {
            -webkit-box-flex: 1.0;
            margin-left: 15px;
            line-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2f2f2f;
            font-size: 13px;
        }

        .refresh {
            width: 57px;
            height: 57px;
            background-image: url('../image/refresh.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 57px 57px;
            position: absolute;
            left: 30px;
            bottom: 15px;
        }

        .div_progress {
            text-align: center;
            margin-top: 100px;
        }

        .div_progress img {
            width: 35px;
            height: 35px;
        }
    </style>
</head>

<body style="background-color:#f8f8f8">
    <div class="div_head" style="display:none">
        <div class="head_left"></div>
        <div class="head_position">
        </div>
    </div>
    <div class="refresh" style="display:none"></div>
    <div class="div_progress">
        <img src="../image/loading_more.gif">
    </div>

    <div class="div_text" style="width:100px;text-align: center;line-height:20px;overflow: hidden">
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var clickState = true;
    var mAmap;
    var mData = new Array(); //地图数据
    var mPosition;
    var mBubble_id = 0; //弹出气泡的id
    var mDivText; //
    apiready = function() {
        init();
        initData(113.931521, 22.52985);
        openMap(0, 113.931521, 22.52985);

    };

    function init() {
        mAmap = api.require('aMap');
        mPosition = document.getElementsByClassName('head_position')[0];
        mDivText = document.getElementsByClassName('div_text')[0];
        var refresh = document.getElementsByClassName('refresh')[0];
        refresh.onclick = function() {

        }

        api.addEventListener({
            name: 'welfareMainFrame'
        }, function(ret, err) {
            console.log('.......收到系统返回按钮......');
            if (clickState) {
                onClickMsg('keyback', '');
            } else {
                clickState = true;
                closeWebpage();
            }
        });

        common.judgeCloudNetworkState(6, function(state) {
            if (state == false) {
                api.toast({
                    msg: '互联连接不通,请连接互联网',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        })

    }
    
    //获取地图数据
    function initData(lon, lat) {
        var parame = {
            siteAreaid: $api.getStorage(common.appKey.siteAreaid),
            userid: $api.getStorage(common.appKey.userId),
            longitude: lon,
            latitude: lat
        }
        var parames = common.getJSONParame(common.keyword.map_showMap, JSON.stringify(parame));
        common.getConsole('请求地图列表数据', JSON.stringify(parames) + '....fwq...' + $api.getStorage(common.appKey.appServer));
        common.ajax($api.getStorage(common.appKey.appServer), parames, 8, function(ret, err) {
            if (ret) {
                common.getConsole('地图列表数据', JSON.stringify(ret));
                if (ret.code == 1) {
                    mData = ret.mapinfo;
                    console.log('........mData.........' + JSON.stringify(mData));
                    if(ret.mapinfo != 0){
                      api.writeFile({
                          path: 'fs://map_frame.txt',
                          data: JSON.stringify(ret.mapinfo)
                      }, function(ret, err) {

                      });
                    }
                } else {
                    common.getShowViewError(ret.code, ret.msg);
                }
            } else {
                common.getConsole('地图列表接口异常', JSON.stringify(err));
                common.getShowViewError(err.code, err.msg);
            }
        })
    }

    //处理数据
    function handleData(data) {
        var data1 = new Array();
        for (var i = 1; i < data.length + 1; i++) {
            var writer = {
                id: i,
                lon: data[i - 1].mapLongitude,
                lat: data[i - 1].mapLatitude
            };
            data1[i - 1] = writer;
        }
        return data1;
    }

    //在地图上添加标注信息
    function addAnnotations(data) {
        console.log('....data..' + data.length)
        mAmap.addAnnotations({
            annotations: data,
            icons: ['widget://wgt/A6050234198860/image/location.png'],
            draggable: false,
            timeInterval: 2.0
        }, function(ret) {
            if (ret.eventType == 'click') {
                mBubble_id = ret.id;
                var name = mData[ret.id - 1].mapName;
                mDivText.innerText = name;
                console.log('....height....' + mDivText.offsetHeight)
                var height = (100 - mDivText.offsetHeight) / 4 + 'px;';
                console.log('....mapName....' + name + '..height..' + height)
                mAmap.setWebBubble({
                    id: ret.id,
                    size: {
                        width: 100,
                        height: 100
                    },
                    bg: 'widget://wgt/A6050234198860/image/prompt_frame.png',
                    url: '',
                    data: '<div style="height:100px;width:100px;font-size:13px;line-height:20px;margin-left:-2px;padding-top:' + height + 'overflow: hidden;">' + name + '</div>'
                });
            }
        });
    }

    //设置中心点的视图
    function centerPoint(lon1, lat1) {
        mAmap.addAnnotations({
            annotations: [{
                id: 98745299,
                lon: lon1,
                lat: lat1
            }],
            icons: ['widget://wgt/A6050234198860/image/position2.png'],
            draggable: true,
            timeInterval: 2.0
        }, function(ret) {
            if (ret.eventType == 'click') {
                console.log('.....点击了......')
            }
        });
    }

    //获取经纬度
    function getLocation() {

        mAmap.getLocation(
            function(ret, err) {
                if (ret.status) {
                    console.log('.....获取位置....261..' + JSON.stringify(ret))
                    if (ret.lon != 0 || ret.lat != 0) {
                        getCenter(ret.lon, ret.lat);
                        centerPoint(ret.lon, ret.lat);
                    } else {
                        if (mData.length == 0) {
                            setTimeout(function() {
                                if (mData.length == 0) {
                                    getCenter(113.931521, 22.52985);
                                } else {
                                    getCenter(mData[0].mapLongitude, mData[0].mapLatitude);
                                }
                            }, 2000);
                        } else {
                            getCenter(mData[0].mapLongitude, mData[0].mapLatitude);
                        }
                    }

                } else {
                    console.log('.....获取位置......' + JSON.stringify(err))
                }
            });
    }

    //设置中心点
    function getCenter(lon1, lat1) {
        mAmap.setCenter({
            coords: {
                lon: lon1,
                lat: lat1
            },
            animation: false
        });
    }

    //打开地图
    function openMap(type1, lon, lat) {
        mAmap.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.frameHeight
            },
            showUserLocation: false,
            zoomLevel: 18,
            center: {
                lon: lon,
                lat: lat
            },
            fixedOn: api.frameName,
            fixed: true
        }, function(ret, err) {
            if (ret.status) {
                console.log('.....打开地图....type1..' + type1)
                    //getNameFromCoords(lon, lat);
                getLocation();
                judgeData();

            } else {
                console.log('.....打开地图......' + JSON.stringify(err))
            }
        });

        mAmap.addEventListener({
            name: 'click'
        }, function(ret) {
            if (ret.status) {
                console.log('.....点击了地图......')
                if (mBubble_id != 0) {
                    mAmap.closeBubble({
                        id: mBubble_id
                    });
                    mBubble_id = 0;
                }
            }
        });
    }

    //判断数据
    function judgeData() {
        api.readFile({
            path: 'fs://map_frame.txt'
        }, function(ret, err) {
            if (ret.status) {
                console.log('..读取文件数据..' + JSON.stringify(ret));
                var data = ret.data;
                if (JSON.parse(data).length == 0) {
                        setTimeout(function() {
                            if (mData.length != 0) {
                                addAnnotations(handleData(mData));
                            }
                        }, 3000);
                } else {
                  if(mData.length == 0){
                    mData = data;
                  }
                    var data3 = handleData(JSON.parse(data));
                    addAnnotations(data3);
                }
            } else {
                console.log('..读取文件数据失败..');
                if (mData.length == 0) {
                    setTimeout(function() {
                        if (mData.length != 0) {
                          addAnnotations(handleData(mData));
                        }
                    }, 3000);
                } else {
                      addAnnotations(handleData(mData));
                }

            }
        });
    }

    //根据经纬度获取地点
    function getNameFromCoords(lon, lat) {
        mAmap.getNameFromCoords({
            lon: lon,
            lat: lat
        }, function(ret, err) {
            if (ret.status) {
                mPosition.innerText = ret.address;
                console.log('.....获取地点......' + JSON.stringify(ret))
            } else {
                console.log('.....获取地点......' + JSON.stringify(err))
            }
        });
    }

    //给原生发送消失
    function onClickMsg(type, msg) {
        api.sendEvent({
            name: 'APICloud4Message',
            extra: {
                msg: msg,
                type: type
            }
        });
    }
</script>

</html>
